<template>
  <div>
    <div class="header">
      <boardhr></boardhr>
    </div>

    <!-- 导航------------------------------------------------------- -->
    <div class="se-nav">
      <div class="nav-item">
        <div @click="change(1)" :class="{ active: boardIndex == 1 }">
          热映口碑榜
        </div>
        <div @click="change(2)" :class="{ active: boardIndex == 2 }">
          最受期待榜
        </div>
        <div @click="change(3)" :class="{ active: boardIndex == 3 }">
          国内票房榜
        </div>
        <div @click="change(4)" :class="{ active: boardIndex == 4 }">
          北美票房榜
        </div>
        <div @click="change(5)" :class="{ active: boardIndex == 5 }">
          TOP100榜
        </div>
      </div>
    </div>

    <!-- 榜单的内容----------------------------------------------------- -->
    <div class="board-item">
      <wellreceived></wellreceived>
    </div>

    <homefooter></homefooter>
  </div>
</template>
<style scoped lang="scss">
.header {
  width: 100%;
  height: 81px;
  background: pink;
}
.se-nav {
  width: 100%;
  height: 60px;
  background: #47464a;

  .nav-item {
    width: 1200px;
    height: 60px;
    // background: skyblue;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-content: center2;

    div {
      width: 160px;
      height: 60px;
      float: left;
      text-align: center;
      line-height: 60px;
      //   background: chocolate;
      color: #999;
      font-size: 16px;
      cursor: pointer;
    }

    div:hover {
      color: #fff;
    }
    .active {
      color: #ef4238;
    }
    .active:hover {
      color: #ef4238;
    }
  }
}

.board-item {
  width: 100%;
  overflow: hidden;
}
</style>
<script>
import wellreceived from "../components/board/wellreceived";
import boardhr from "../components/home/header";
import homefooter from "../components/home/homefooter";
export default {
  data() {
    return {
      boardIndex: 1,
    };
  },
  components: {
    wellreceived,
    boardhr,
    homefooter,
  },

  methods: {
    change(index) {
      this.boardIndex = index;
    },
  },
};
</script>